export function watermark(options) {
    const {
        container = document.body, // 容器
        width = '200', // canvas元素宽
        height = '80', // canvas元素高
        textAlign = 'left', // 文字对齐
        textBaseline = 'bottom', // 基准线
        font = '16px Microsoft Yahei', // 字体大小及样式
        fillStyle = '#000', // 自定义水印的颜色
        content = '内部文档，请勿外传', // 水印内容
        globalAlpha = 0.1, // 设置图形和图像透明度的值
        rotate = -10, // 文字旋转角度
        zIndex = 1000, // 元素堆叠顺序
    } = options;

    let canvas = document.createElement('canvas');
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    let ctx = canvas.getContext('2d'); // 获取 canvas2d 上下文
    ctx.globalAlpha = globalAlpha;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate((Math.PI * rotate) / 180);

    if (ctx.measureText(content).width > 180) {
        ctx.font = '12px ' + ' Microsoft JhengHei'
    }

    // // 水印文字换行 ①
    // var temp = "";
    // var row = [];
    // for (var a = 0; a < content.length; a++) {
    //     if (ctx.measureText(temp).width < 150) {
    //         ;
    //     }
    //     else {
    //         row.push(temp);
    //         temp = "";
    //     }
    //     temp += content[a];
    // }
    // row.push(temp);
    // for (var b = 0; b < row.length; b++) {
    //     ctx.fillText(row[b], 10, 30 + (b + 1) * 20);
    // }

    // 水印文字换行  ② 
    var text = "";
    var count = 0;
    var begin_width = 20;
    var begin_height = 60;
    var newtext = content.split("");
    for (let i = 0; i <= content.length; i++) {
        if (count == 10) {
            ctx.fillText(text, begin_width, begin_height);
            begin_height = begin_height + 25;
            text = "";
            count = 0;
        }
        if (i == content.length) {
            ctx.fillText(text, begin_width, begin_height);
        }
        var text = text + newtext[0];
        count++;
        newtext.shift();
    }

    // ctx.fillText(content, 10, 60);

    const base64Url = canvas.toDataURL(); // 返回一个包含图片展示的 data URI

    const __wm = document.querySelector('.__wm');//选择器
    const watermarkDiv = __wm || document.createElement("div");
    const styleStr = `
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      z-index:${zIndex};
      pointer-events:none;
      background-repeat:repeat;
      background-image:url('${base64Url}')`;

    watermarkDiv.setAttribute('style', styleStr);
    watermarkDiv.classList.add('__wm'); // 为元素添加“__wm”类名

    container.style.position = 'relative';
    if (!__wm) {
        container.appendChild(watermarkDiv); // 添加元素
    }

    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    // 检查浏览器是否支持这个API
    if (MutationObserver) {
        const args = arguments[0];
        let mo = new MutationObserver(function () {
            const __wm = document.querySelector('.__wm');
            // 只在__wm元素变动才重新调用
            if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm || container.style.position !== 'relative') {
                // 避免一直触发
                mo.disconnect();
                mo = null;
                watermark(args);
            }
        });
        mo.observe(container, {
            attributes: true, // 观察目标节点的属性节点
            subtree: true, // 观察目标节点的所有后代节点
            childList: true, // 观察目标节点的子节点
        })
    }
};
